<template>
    <div class="hea-1">
        <img src="../../public//log_img/wuzuxiu.png" alt="" class="im1">
        <div class="guide">
            <img src="../../public/log_img/favorite-guide.webp" alt="" class="im2">
        </div>
    </div>
    <div class="hea-2">
        <ul class="ul-1">
            <li style="font-weight: 800;">免费模板</li>
            <li>开通会员</li>
            <li>解决方案</li>
            <li>企业服务</li>
            <li>AI创作</li>
            <li>内容平台</li>
            <li>下载APP</li>
        </ul>
    </div>
    <div class="hea-3">
        <span style="display: inline-block;line-height: 45px;">{{ userInfo }}</span>
        <!-- <img :src="data.data.icon" alt="" style="width: 50px;height: 50px;border-radius: 50%;"> -->
        <img :src="icon" alt="" class="icon">
        <el-button type="primary" @click="exit">退出登录</el-button>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const userInfo = localStorage.getItem('userInfo')
const icon = localStorage.getItem('img')

const router = useRouter()
const exit = () => {
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    localStorage.removeItem('img')
    router.replace('/login')
}

</script>

<style scoped>
.hea-1 {
    width: 15%;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.hea-1:hover .guide {
    display: block;
}

.guide {
    width: 250px;
    position: absolute;
    top: 15px;
    left: 32%;
    z-index: 555;
    display: none;
}

.im1 {
    width: 100%;
}

.im2 {
    width: 120%;
}

.hea-2 {
    width: 60%;
    height: 100%;
}

.ul-1 {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-evenly;
    align-items: center;
}

.ul-1>li:hover {
    font-weight: 800;
    cursor: pointer;
}

.hea-3 {
    width: 20%;
    height: 100%;
    /* background-color: pink; */
    display: flex;
    justify-content: space-evenly;
}

/* 头像帧动画 */
.icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation: icon 2s 2s linear infinite;
}

@keyframes icon {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(60deg);
    }

    75% {
        transform: rotate(120deg);
    }

    85% {
        transform: rotate(160deg);
    }

    100% {
        transform: rotate(180deg);
    }
}
</style>